<template>
<div>
<!-- 搜索组件 -->
<searchData :searchForm="searchForm" :searchData.sync="searchData" :rules="rules" ref="search"></searchData>
<!-- 表格组件 -->
  <ces-table 
  :isBorder="true" 
  size="small" 
  :isIndex="true" 
  :isHandle='true'
  :tableHandles='tableHandles'
  :isPagination='true'
  :pagination='pagination'
  :tableData="tableData" 
  :tableCols="tableCols">
    <!-- 需要改什么字段的话，请通过插槽的方式传递 -->
    <template #status="scope">
      <el-button :type="scope.row.status == '待审核' ? 'success' : 'danger'" size="mini">{{scope.row.status}}</el-button>
    </template>
    <!-- 如果后端返回的数据不符合展示的要求，可以拿到该列数据，自己为数据修改样式 -->
    <template #money="scope">
      {{scope.row.money | handleMoney(scope.row.money)}}
    </template>
    <!-- 加入编辑查看按钮,scope中会带有该行的数据 -->
    <template #operation="scope">
      <el-button icon="el-icon-delete" type="parimay" @click="seeClick(scope)">查看</el-button>
      <el-button icon="el-icon-delete" type="danger" @click="deleteClick(scope)">删除</el-button>
    </template>
  </ces-table>
</div>

</template>

<script>
import searchData from './components/searchForm.vue'
import cesTable from './components/cesTable.vue'
export default {
  components: { cesTable,searchData },
  data() {
    return {
      // 搜索区域 
      searchForm: [
        {prop:'name',type:'input',label:'用户名:',placeholder:'请输入用户名'},
        {prop:'des',type:'textarea',label:'自我介绍:',placeholder:'请输入自我介绍'},
        {prop:'hobby',type:'select',label:'爱好',placeholder:'请选择你的爱好',options:[
          {label: "北京", value: "beijing" },
          {label: "上海", value: "shanghai" },
        ]},
        {prop:'sex',type:'radio',label:'性别',placeholder:'请选择你的性别',options:[
          {label: "男"},
          {label: "女" },
        ]},
        {prop:'fruits',type:'checkbox',label:'你喜欢吃的水果',options:[
          {label: "苹果"},
          {label: "香蕉" },
        ]},
        {prop:'ydata',type:'daterange',label:'毕业时间',placeholder:'请输入用户名'},
        {type:'button',handle:this.searchBtnClick,name:'搜索'},
        {type:'button',handle:this.resetBtnClick,name:'重置'}
      ],
      // 里面的值请与prop的值保持一致
      searchData: {
        name:'',
        des:'',
        hobby:'',
        ydata:'',
        fruits:[]
      },
      // 表单的规则选项
      rules: {
        name:[{required:true,message:'请输入你的名字',trigger: 'blur'}]
      },
      // 表格的渲染数据
      tableData: [
          {
            date: "2016-05-02",
            name: "李小明",
            money: 1000,
            status: "待审核",
            address: "江西省赣州市",
          },
          {
            date: "2018-05-04",
            name: "李大胆",
            money: 990,
            status: "通过",
            address: "上海市普陀区",
          },
          {
            date: "2020-05-01",
            name: "刘小二",
            money: 888,
            status: "待审核",
            address: "北京市天安门",
          },
      ],
      // 表格的列配置
      tableCols: [
        { prop: "name", label: "用户名", minWidth: "100", hidden: false,slotname:'name',isSortable:true },
        { prop: "date", label: "日期", minWidth: "120", hidden: false,slotname:'date',isSortable:true },
        { prop: "money", label: "财富值", minWidth: "120", hidden: false,slotname:'money' },
        { prop: "status", label: "状态", minWidth: "80", hidden: false,slotname:'status' },
        { prop: "address", label: "地址", minWidth: "100", hidden: false,slotname:'address' },
        { prop: "operation", label: "操作", minWidth: "100", hidden: false,slotname:'operation' },
      ],
      // 对表格的操作
      tableHandles: [
        {label:'新增联系人',type:'primary',icon:'el-icon-thumb',handle:row=>{console.log('新增联系人')}},
        {label:'导入数据',type:'success',icon:'el-icon-location-information',handle:row=>{console.log('导入数据')}},
        {label:'导出数据',type:'success',icon:'el-icon-position',handle:row=>{console.log('导入数据')}}
      ],
      // 分页数据
      pagination:{
        pageSize:10,
        pageNum:1,
        total:7
      }
    }
  },
  methods: {
    seeClick(row) {
      console.log('查看按钮,该行的数据为',row)
    },
    deleteClick(row) {
      console.log('删除按钮,该行的数据为',row);
    },
    searchBtnClick() {
      console.log('搜索');
      console.log(this.searchData)
    },
    resetBtnClick() {
      console.log('重置');
      this.$refs.search.resetForm();
    }
  },
  filters: {
    handleMoney(val) {
      return '￥'+val+'.00';
    }
  }
}
</script>